<!DOCTYPE html>
<html class="ui-page-login">

<head>
  <meta charset="utf-8">
  <meta http-equiv="Access-Control-Allow-Origin" content="*">
  <meta http-equiv="content-security-policy">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
  <title>物流追踪</title>
  <!-- build:css /css/main.css -->
  <link href="/css/mui.css" rel="stylesheet"/>
  <link href="/css/iconfont.css" rel="stylesheet"/>
  <link href="/css/common.css" rel="stylesheet"/>
  <!-- endbuild -->
  <style>
    .mui-table-view:after {
      height: 0;
    }

    .mui-table-view-cell:hover {
      background-color: #fff;
    }

    .mui-table-view-cell > a:not(.mui-btn) {
      font-size: 12px;
    }

    .mui-table-view-cell .mui-table-view .mui-table-view-cell {
      font-size: 12px;
      padding-left: 50px;
    }

    .mui-table-view-cell .mui-table-view .mui-table-view-cell:after {
      height: 0;
    }

    .mui-table-view-cell > a:not(.mui-btn) {
      white-space: inherit;
    }

    #orderTrackingList {
      padding: 5px 10px;
    }

    #orderTrackingList li {
      list-style: none;
    }

    #orderTrackingList .logis-detail-date {
      width: 80px;
      padding: 10px 0 10px 4px;
      text-align: left;
      font-size: 14px;
    }

    #orderTrackingList li:first-child .logis-detail-date {
      color: rgba(255, 80, 0, 1);
    }

    #orderTrackingList li {
      color: #666;
      position: relative;
    }

    #orderTrackingList li:first-child .logis-detail-first {
      border-left: 2px solid rgba(255, 80, 0, 1);
      color: #fff;
    }

    #orderTrackingList .logis-detail-d {
      border-left: 2px solid #bdbdbd;
      padding: 10px 0 10px 25px;
      margin-left: 25px;
      position: relative;
    }

    #orderTrackingList .logis-detail-content {
      display: -webkit-box;
      position: relative;
      background: #ddd;
      padding: 5px 10px;
      -webkit-border-radius: 2px;
      font-size: 14px;
    }

    #orderTrackingList .logis-detail-content .logis-detail-content-time {
      width: 50px;
      line-height: 25px;
    }

    #orderTrackingList .logis-detail-content .logis-detail-content-detail {
      -webkit-box-flex: 1;
      line-height: 25px;
    }

    #orderTrackingList .logis-detail-content:after {
      content: '';
      display: inline-block;
      position: absolute;
      left: -10px;
      top: 10px;
      border-right: 10px solid #ddd;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }

    #orderTrackingList .logis-detail-d:after {
      content: '';
      display: inline-block;
      position: absolute;
      left: -6px;
      top: 22px;
      width: 6px;
      height: 6px;
      -webkit-border-radius: 10px;
      background: #BDBDBD;
      border: 2px solid #EEE;
    }

    #orderTrackingList li:first-child .logis-detail-first .logis-detail-content {
      background: rgba(255, 80, 0, 1);
      color: #fff;
    }

    #orderTrackingList li p {
      margin-bottom: 0;
    }

    #orderTrackingList li:first-child .logis-detail-first p {
      color: #fff;
    }

    #orderTrackingList li:first-child .logis-detail-first:after {
      background: rgba(255, 80, 0, 1);
      border: 2px solid #EEE;
    }

    #orderTrackingList li:first-child .logis-detail-first .logis-detail-content:after {
      border-right-color: rgba(255, 80, 0, 1);
    }

    .order-font {
      font-size: 14px;
      font-weight: bold;
      color: #333;
      display: block;
      line-height: 30px;
    }
  </style>

</head>

<body>
<header class="mui-bar mui-bar-nav u-nav">
  <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  <h1 class="mui-title">订单跟踪</h1>
  <span id="to_info" class="mui-icon mui-icon-bars mui-pull-right" onclick="ssdd('#fnav')"></span>
</header>
<nav class="mui-bar mui-bar-tab otherNav" id="fnav">
  <a class="mui-tab-item" data-id="index.html" data-url="/index.html">
    <span class="mui-icon iconfont icon-icon-home"></span>
    <span class="mui-tab-label">首页</span>
  </a>
  <a class="mui-tab-item" data-id="category.html" data-url="/category.html">
    <span class="mui-icon iconfont icon-fenlei"></span>
    <span class="mui-tab-label">分类</span>
  </a>
  <a class="mui-tab-item" data-id="search.html" data-url="/search.html">
    <span class="mui-icon iconfont icon-fenleisousuo-home"></span>
    <span class="mui-tab-label">搜索</span>
  </a>
  <a class="mui-tab-item" data-id="cart.html" data-url="/cart.html">
    <span class="mui-icon iconfont icon-gouwuche1"></span>
    <span class="mui-tab-label">购物车</span>
  </a>
  <a class="mui-tab-item" data-id="user.html" data-url="/user/user.html">
    <span class="mui-icon iconfont icon-gerenzhongxin"></span>
    <span class="mui-tab-label">我</span>
  </a>
</nav>

<div class="mui-content mui-scroll-wrapper">
  <div class="mui-scroll" style="padding-bottom:50px;">
    <div class="mui-control-content mui-active">
      <ul class="mui-table-view goodslist ">
        <li class="mui-table-view-cell">
          <span class="order-font">物流公司: <font id="order_express">中通速递</font></span>
          <span class="order-font">订单号: <font id="order_sn">1115000005486</font></span>
        </li>
      </ul>
      <div id="orderTrackingList">
        <li>
          <div class="logis-detail-date">01-03</div>
          <div class="logis-detail-d logis-detail-first">
            <div class="logis-detail-content">
              <p class="logis-detail-content-time"> 10:51 </p>
              <p class="logis-detail-content-detail"> 已签收,签收人是已签收665556 </p>
            </div>
          </div>
          <div class="logis-detail-d ">
            <div class="logis-detail-content">
              <p class="logis-detail-content-time"> 08:57 </p>
              <p class="logis-detail-content-detail"> 快件已到达【浙江宁波江东公司】 扫描员是【小段】上一站是【】 </p>
            </div>
          </div>
          <div class="logis-detail-d ">
            <div class="logis-detail-content">
              <p class="logis-detail-content-time"> 08:20 </p>
              <p class="logis-detail-content-detail"> 【浙江宁波江东公司】的派件员【汽车东站点部】正在派件 电话:18858033482 </p>
            </div>
          </div>
          <div class="logis-detail-d ">
            <div class="logis-detail-content">
              <p class="logis-detail-content-time"> 06:38 </p>
              <p class="logis-detail-content-detail"> 由【浙江宁波中转部】发往【浙江宁波江东公司】 </p>
            </div>
          </div>
        </li>

        <li>
          <div class="logis-detail-date">01-03</div>
          <div class="logis-detail-d">
            <div class="logis-detail-content">
              <p class="logis-detail-content-time"> 10:51 </p>
              <p class="logis-detail-content-detail"> 已签收,签收人是已签收665556 </p>
            </div>
          </div>
          <div class="logis-detail-d ">
            <div class="logis-detail-content">
              <p class="logis-detail-content-time"> 08:57 </p>
              <p class="logis-detail-content-detail"> 快件已到达【浙江宁波江东公司】 扫描员是【小段】上一站是【】 </p>
            </div>
          </div>
          <div class="logis-detail-d ">
            <div class="logis-detail-content">
              <p class="logis-detail-content-time"> 08:20 </p>
              <p class="logis-detail-content-detail"> 【浙江宁波江东公司】的派件员【汽车东站点部】正在派件 电话:18858033482 </p>
            </div>
          </div>
          <div class="logis-detail-d ">
            <div class="logis-detail-content">
              <p class="logis-detail-content-time"> 06:38 </p>
              <p class="logis-detail-content-detail"> 由【浙江宁波中转部】发往【浙江宁波江东公司】 </p>
            </div>
          </div>
        </li>

      </div>
    </div>
  </div>
</div>

<!-- build:js /js/vendor.js -->
<script src="/js/mui.min.js"></script>
<!-- bower:js -->
<script src="/bower_components/mockjs/dist/mock.js"></script>
<script src="/bower_components/zepto/zepto.js"></script>
<script src="/bower_components/Zepto-Cookie/zepto.cookie.js"></script>
<!--  endbower -->
<!-- endbuild -->
<!-- build:js /js/main.js -->
<script src="/js/common.js"></script>
<script src="/js/app.js"></script>
<!-- endbuild -->
<script>
  (function (mui, doc) {


    var tokenVal = $.fn.cookie('token');
    ifLogin(tokenVal);
    var orderId = getQueryString('orderId');
    var getOrdersTracking = function () {
      $.ajax({
        url: __BATE__ + 'api/orderTracking',
        data: {
          orderId: orderId,
          token: tokenVal
        },
        type: 'post',
        success: function (json) {
          var htmls = '';
          for (var i = 0; i < json.data.length; i++) {
            htmls += '<li><div class="logis-detail-date">' + json.data[i].time + '</div>';

            var hh = '';
            for (var k = 0; k < json.data[i].list.length; k++) {
              hh += '<div class="logis-detail-d "> ' +
                '<div class="logis-detail-content"> ' +
                '<p class="logis-detail-content-time"> ' + json.data[i].list[k].sTime + ' </p> ' +
                '<p class="logis-detail-content-detail"> ' + json.data[i].list[k].content + '</p> ' +
                '</div>' +
                '</div>';
            }
            htmls = htmls + hh + '</li>';
          }
          $("#orderTrackingList").html(htmls);
        },
        error: function () {
          serverErr();
        }
      });

    };
    getOrdersTracking();
  }(mui, document));
</script>
</body>

</html>
